<!--
  角色表单组件 - 支持新增和编辑模式
  @usage 在角色管理页面中使用
  @path /components/system/role/RoleForm.vue
  @related views/system/role/Index.vue
-->
<template>
  <div class="role-form-container">
    <!-- 弹窗模式 -->
    <el-dialog
      v-if="displayMode === 'dialog'"
      v-model="dialogVisible"
      :title="formTitle"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        class="role-form"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="formData.roleName"
            placeholder="请输入角色名称"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="角色编码" prop="roleCode">
          <el-input
            v-model="formData.roleCode"
            placeholder="请输入角色编码"
            maxlength="50"
            :disabled="mode === 'edit'"
          />
        </el-form-item>

        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="3"
            placeholder="请输入角色描述"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
            {{ mode === 'add' ? '新增' : '保存' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 标签页模式 -->
    <div v-else class="tabs-mode">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        class="role-form"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="角色名称" prop="roleName">
              <el-input
                v-model="formData.roleName"
                placeholder="请输入角色名称"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="角色编码" prop="roleCode">
              <el-input
                v-model="formData.roleCode"
                placeholder="请输入角色编码"
                maxlength="50"
                :disabled="mode === 'edit'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="3"
            placeholder="请输入角色描述"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- tabs模式下的操作按钮 -->
        <el-form-item>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
            {{ mode === 'add' ? '新增' : '保存' }}
          </el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { 
  ref, 
  reactive, 
  computed,
  watch,
  onBeforeMount,
  onMounted, 
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  nextTick 
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 组件名称
defineOptions({
  name: 'SystemRoleForm'
})

// 组件属性定义
const props = defineProps({
  // 显示模式：'dialog' 或 'tabs'
  displayMode: {
    type: String,
    default: 'dialog',
    validator: (value) => ['dialog', 'tabs'].includes(value)
  },
  // 表单模式：'add' 或 'edit'
  mode: {
    type: String,
    default: 'add',
    validator: (value) => ['add', 'edit'].includes(value)
  },
  // 角色ID（编辑模式时使用）
  roleId: {
    type: [Number, String],
    default: null
  },
  // 弹窗可见性（dialog模式时使用）
  visible: {
    type: Boolean,
    default: false
  },
  // 角色数据（编辑模式时使用）
  roleData: {
    type: Object,
    default: () => ({})
  }
})

// 组件事件定义
const emit = defineEmits(['update:visible', 'success', 'cancel', 'close'])

// 响应式变量声明（按照模板中的顺序）
const formRef = ref()
const submitLoading = ref(false)

// 响应式对象
const formData = reactive({
  id: null,
  roleName: '',
  roleCode: '',
  description: '',
  status: 1
})

const formRules = reactive({
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 50, message: '角色名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  roleCode: [
    { required: true, message: '请输入角色编码', trigger: 'blur' },
    { min: 2, max: 50, message: '角色编码长度在 2 到 50 个字符', trigger: 'blur' },
    { pattern: /^[A-Z_]+$/, message: '角色编码只能包含大写字母和下划线', trigger: 'blur' }
  ],
  description: [
    { max: 200, message: '描述长度不能超过 200 个字符', trigger: 'blur' }
  ]
})

// 计算属性
const formTitle = computed(() => {
  return props.mode === 'add' ? '新增角色' : '编辑角色'
})

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 响应函数声明（按照模板中的顺序）
/**
 * 表单提交处理
 */
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    // 表单验证
    await formRef.value.validate()
    
    submitLoading.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 根据模式调用不同的API
    if (props.mode === 'add') {
      // 新增角色逻辑
      console.log('新增角色数据:', formData)
      ElMessage.success('角色新增成功')
    } else {
      // 编辑角色逻辑
      console.log('更新角色数据:', formData)
      ElMessage.success('角色更新成功')
    }

    // 触发成功事件
    emit('success', {
      mode: props.mode,
      data: { ...formData }
    })

    // 关闭表单
    handleClose()
  } catch (error) {
    if (error !== false) {
      console.error('表单提交失败:', error)
      ElMessage.error('提交失败，请重试')
    }
  } finally {
    submitLoading.value = false
  }
}

/**
 * 关闭处理
 */
const handleClose = () => {
  if (submitLoading.value) return

  // 重置表单
  resetForm()

  // 触发关闭事件
  emit('close')
  emit('cancel')
  
  // 如果是弹窗模式，关闭弹窗
  if (props.displayMode === 'dialog') {
    emit('update:visible', false)
  }
}

/**
 * 重置表单数据
 */
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  
  Object.assign(formData, {
    id: null,
    roleName: '',
    roleCode: '',
    description: '',
    status: 1
  })
}

/**
 * 加载角色数据（编辑模式）
 */
const loadRoleData = async () => {
  if (props.mode !== 'edit' || !props.roleId) return

  try {
    // 模拟API调用获取角色数据
    await new Promise(resolve => setTimeout(resolve, 500))

    // 如果有传入角色数据，直接使用
    if (props.roleData && Object.keys(props.roleData).length > 0) {
      Object.assign(formData, {
        id: props.roleData.id,
        roleName: props.roleData.roleName || '',
        roleCode: props.roleData.roleCode || '',
        description: props.roleData.description || '',
        status: props.roleData.status ?? 1
      })
    } else {
      // 否则根据roleId模拟数据
      const mockData = {
        id: props.roleId,
        roleName: '测试角色',
        roleCode: 'TEST_ROLE',
        description: '这是一个测试角色',
        status: 1
      }
      Object.assign(formData, mockData)
    }
  } catch (error) {
    console.error('加载角色数据失败:', error)
    ElMessage.error('加载角色数据失败')
  }
}

// 样式函数声明
/**
 * 初始化表单数据
 */
const initFormData = () => {
  resetForm()
  
  if (props.mode === 'edit') {
    loadRoleData()
  }
}

/**
 * 监听角色数据变化
 */
const watchRoleData = () => {
  if (props.mode === 'edit' && props.roleData) {
    Object.assign(formData, {
      id: props.roleData.id,
      roleName: props.roleData.roleName || '',
      roleCode: props.roleData.roleCode || '',
      description: props.roleData.description || '',
      status: props.roleData.status ?? 1
    })
  }
}

// 监听器
watch(() => props.visible, (newVal) => {
  if (newVal) {
    initFormData()
  }
})

watch(() => props.roleData, () => {
  watchRoleData()
}, { deep: true })

// 生命周期钩子
onBeforeMount(() => {
  // 组件挂载前执行的逻辑
  console.log('角色表单组件即将挂载')
})

onMounted(() => {
  // 组件挂载后执行的逻辑
  initFormData()
  console.log('角色表单组件已挂载')
})

onBeforeUpdate(() => {
  // 组件更新之前执行的逻辑
  nextTick(() => {
    // 在DOM更新之后执行的逻辑
  })
})

onUpdated(() => {
  // 组件更新之后执行的逻辑
})

onBeforeUnmount(() => {
  // 组件卸载前执行的逻辑
  console.log('角色表单组件即将卸载')
})

onUnmounted(() => {
  // 组件卸载后执行的逻辑
})

onErrorCaptured((err, instance, info) => {
  // 捕获来自后代组件的错误
  console.error('角色表单组件错误:', err, info)
  return false // 阻止错误继续向上传播
})
</script>

<style lang="less" scoped>
.role-form-container {
  // 角色表单容器样式

  .role-form {
    // 表单样式
    .el-form-item {
      margin-bottom: 24px;
    }

    .el-input,
    .el-textarea {
      :deep(.el-input__wrapper) {
        border-radius: 6px;
      }

      :deep(.el-textarea__inner) {
        border-radius: 6px;
        resize: vertical;
      }
    }

    .el-radio-group {
      .el-radio {
        margin-right: 24px;
        
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  // 弹窗模式样式
  .dialog-footer {
    text-align: right;
    
    .el-button {
      margin-left: 12px;
      
      &:first-child {
        margin-left: 0;
      }
    }
  }

  // 弹窗内容样式优化
  :deep(.el-dialog) {
    width: 500px;
    max-width: 90vw;
    
    .el-dialog__body {
      padding: 24px;
      overflow-y: auto;
      max-height: 70vh;
    }
    
    .el-dialog__header {
      padding: 20px 24px;
      border-bottom: 1px solid #e8e8e8;
    }
    
    .el-dialog__footer {
      padding: 16px 24px;
      border-top: 1px solid #e8e8e8;
    }
  }
}
</style>
// 标签页模式样式
.tabs-mode {
  padding: 24px;
  background-color: transparent;
  
  .role-form {
    max-width: 800px;
    margin: 0 auto;
  }
}